<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- id选择器 -->
      <form v-on:submit.prevent="handleSumbmit">
        <input
          class="form-input"
          type="text"
          placeholder="enter your username"
          v-model="username"
          v-bind:class="is_username_error"
          v-on:input="handleUsernameInputError"
        />
        <br />
        <input
          class="form-input"
          type="password"
          placeholder="enter your password"
          v-model="password"
          v-bind:class="is_password_error"
      
        />

        <br />
        <button type="submit">Login</button>
      </form>
    </div>

    <script>
          const { createApp } = Vue;

            const app ={
            data() {
              return {
                    username:'',
                    is_username_error:"",
                    password:'',
                    is_password_error:""
              };
            },
            watch:{
                username(newUsername,oldUsername){
                    if(newUsername.length < 3){
                      this.is_username_error = "input-error"
                    }else{
                      this.is_username_error = ''
                    }
                },
                 password(newPassword,oldPassword){
                    if(newPassword.length < 3){
                      this.is_password_error = "input-error"
                    }else{
                      this.is_password_error = ''
                    }
                }
            },
            methods:{
                handleSumbmit(event) {
                    // event.preventDefault();
                    this.is_password_error = this.is_username_error = '';
                    if(this.username.length < 3 || this.password.length <6){
                        alert('用户名或密码长度不能小于3或6')
                        if(this.username.length < 3){
                        this.is_username_error = 'input-error';
                        }else{
                            this.is_password_error = 'input-error'
                        }
                        return;
                    }
                    alert(`username:${this.username},password:${this.password}`)
                  }
                }
            //     handleUsernameInputError(){
            //         if(this.username.length < 3){
            //             this.is_username_error = 'input-error';
            //     }else{
            //         this.is_username_error='';
            //     }
            // }
                // ,
                // handlePasswordInputError(){

                //     if(this.password.length <6){
                //             this.is_password_error = 'input-error'
                //         }else{
                //             this.is_password_error='';
                //         }
                // }
            }
          
            

          createApp(app).mount("#app");
    </script>
  </body>
</html>
